import { Tabs } from 'nextra/components'
import { Badge } from '/components/badge'

# Document Configuration

This section is used to configure the display and behavior of the Umo Editor document area and document name.

## Default Configuration

```js
{
  document: {
    title: '未命名文档',
    content: '',
    placeholder: {
      en_US: 'Please enter the document content...',
      zh_CN: '请输入文档内容...',
      ru_RU: 'Пожалуйста, введите содержимое документа...',
    },
    enableSpellcheck: true,
    enableMarkdown: true,
    enableBubbleMenu: true,
    enableBlockMenu: true, // New in v1.3.0
    readOnly: false,
    autofocus: true,
    characterLimit: 0,
    typographyRules: {},
    editorProps: {}, // New in v2.3.0
    parseOptions: { // New in v2.3.0
      preserveWhitespace: 'full',
    },
    autoSave: { // New in v1.4.0
      enabled: true,
      interval: 300000,
    },
  },
}
```

## Configuration Item Descriptions

### document.title

**Description**: The document title, used for the file name when exporting, etc. You can dynamically set or modify the document title using the [setDocument](../methods#setdocument).

**Type**: `String`

**Default**: `Untitled Document`

### document.content

**Description**: The initial document content, which users can modify. You can dynamically set or modify the document content using the [setContent](../methods#setcontent).

**Type**: `String`

**Default**: Empty

### document.placeholder

**Description**: The placeholder displayed when the document content is empty.

**Type**: `String` or `Object`

**Default**: `Please enter the document content...`

### document.enableSpellcheck

**Description**: Whether to enable the browser's spellcheck feature. When enabled, users can manually turn it off. You can dynamically set whether to enable the browser's spellcheck feature using the [setDocument](../methods#setdocument).

**Type**: `Boolean`

**Default**: `true`

### document.enableMarkdown

**Description**: Whether to enable Markdown syntax. When enabled, users can manually turn it off. You can dynamically set whether to enable Markdown syntax using the [setDocument](../methods#setdocument).

**Type**: `Boolean`

**Default**: `true`

### document.enableBubbleMenu

**Description**: Whether to display the bubble menu. You can dynamically set whether to display the bubble menu using the [setDocument](../methods#setdocument).

**Type**: `Boolean`

**Default**: `true`

### document.enableBlockMenu <Badge theme="success">v1.3.0 Added</Badge>

**Description**: Whether to display the block menu. You can dynamically set whether to display the block menu using the [setDocument](../methods#setdocument).

**Type**: `Boolean`

**Default**: `true`

### document.readOnly

**Description**: Determines whether the document is read-only. When set to `true`, users cannot edit the current document. You can set the read-only status using the [setReadOnly method]((../methods#setreadonly)).

**Type**: `Boolean`

**Default**: `false`

### document.autofocus

**Description**: Whether the document automatically receives cursor focus.

**Type**: `Boolean`

**Default**: `true`

### document.characterLimit

**Description**: The character limit for the document. If `0`, there is no limit on the number of characters.

**Type**: `Number`

**Default**: `0`

### document.typographyRules

**Description**: Document typography rules.

**Type**: `Object`

**Default**: `{}`

**Configuration Items**:

| Name | Description | Default Enabled |
| :--- | :---: | :---: |
| emDash | Converts double hyphens -- to an em dash —. | ✅ Enabled |
| ellipsis | Converts three dots ... to an ellipsis …. | ✅ Enabled |
| openDoubleQuote | “Smart” left double quotes. | ✅ Enabled |
| ... | ... | ... |

To disable an item, set it to `false`. For example:

<Tabs items={['Global Configuration', 'SFC Configuration']}>
<Tabs.Tab>
```js
{
  document: {
    typographyRules: {
      emDash: false
    }
  }
}
```
</Tabs.Tab>
<Tabs.Tab>
```vue
<template>
  <umo-editor 
    :document="{
      typographyRules: {
        emDash: false
      }
    }" 
  />
</template>
 
<script setup>
import { UmoEditor } from '@umoteam/editor'
</script>
```
</Tabs.Tab>
</Tabs>

### document.autoSave <Badge theme="success">v1.4.0 Added</Badge> [#autosave]

**Description**: Document auto-save configuration. You can dynamically set or modify this configuration using the [setDocument](/methods#setdocument).

**Type**: `Object`

**Configuration Items**:
- `enabled`: `Boolean`, whether to enable auto-save, default is `true`.
- `interval`: `Number`, the interval between auto-saves in milliseconds, default is `300000` (5 minutes).


### document.editorProps <Badge theme="success">v2.3.0 Added</Badge>

**Description**：For advanced use cases, you can pass which will be handled by [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps). You can use it to override various editor events or change editor DOM element attributes, for example to add some Tailwind classes. For more information, see: https://prosemirror.net/docs/ref/#view.EditorProps

**Example**：
```js
{
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
    transformPastedText(text) {
      return text.toUpperCase()
    },
  },
}
```

**Type**：`Object`

**Default**：`{}`

### document.parseOptions <Badge theme="success">v2.3.0 Added</Badge>

**Description**：Passed content is parsed by [ProseMirror](https://prosemirror.net/docs/ref/#view.EditorProps). To hook into the parsing, you can pass which are then handled by ProseMirror. For more information, see: https://prosemirror.net/docs/ref/#view.EditorProps

**Type**：`Object`

**Default**：`{ preserveWhitespace: 'full' }`